<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <!--    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->
    <script type="text/javascript" src="https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.3/dingtalk.open.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">

    <script>
        $(function (){
            var page = 0;

            $("#update").click(function (){
                if (confirm("确认要更新员工信息表吗？")){
                    alert("开始更新！")
                    $.ajax({
                        url:"/departIdGet",
                        type:"post",
                        dataType:"text",
                        success:function(jsonArray){
                            alert("更新用户名单成功！");
                            showData(jsonArray,0);
                            page=0;
                        },
                        error:function (msg){
                            alert("更新失败:"+msg);
                        }
                    })
                }else{
                    alert("取消更新")
                }

            })

            $.ajax({
                url:"/showAllUser",
                type:"post",
                dataType:"json",
                success:function(jsonArray){
                    showData(jsonArray,page);
                },
                error:function (msg){
                    alert("ajax失败:"+msg);
                }
            });

            $("#submit").click(function (){
                var search = $("#search").val();
                $.ajax({
                    type:"post",
                    url:"/selectUser",
                    //contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    data:{
                        "search":search,
                    },
                    success:function(jsonArray){
                        //alert("success!")
                        showData(jsonArray,0);
                        page = 0;
                    },
                    error:function (msg){
                        alert("ajax失败:"+msg);
                    }
                });
            });

            $("#nextpage").click(function (){
                var search = $("#search").val();
                $.ajax({
                    url:"/selectUser",
                    type:"post",
                    dataType:"json",
                    data:{
                        "search":search,
                    },
                    success:function(jsonArray){
                        page = page+1;
                        showData(jsonArray,page);
                    },
                    error:function (msg){
                        alert("ajax失败:"+msg);
                    }
                });
            })

            $("#lastpage").click(function (){
                var search = $("#search").val();
                $.ajax({
                    url:"/selectUser",
                    type:"post",
                    dataType:"json",
                    data:{
                        "search":search,
                    },
                    success:function(jsonArray){
                        page = page-1;
                        showData(jsonArray,page);
                    },
                    error:function (msg){
                        alert("ajax失败:"+msg);
                    }
                });
            })

            function showData(jsonArray,j){
                //清空table
                var table = document.getElementById("tab");
                arr = table.getElementsByTagName("tr");

                //表明是第几页
                var tablenum = document.getElementById("num");
                tablenum.innerText = j+1;

                //不能用i++的方式去删除，双数行删不掉，删掉第一行的时候第二行变成第一行，下一次删的是第三行。
                //所以采用从最后开始的删除方法。
                for(var i=arr.length-1;i>0;i--){
                    table.deleteRow(i);
                }
                var str = "";
                var length = jsonArray.length
                var size = 0;       //记录长度，长度为15就截止
                //alert(j)//第几页？
                for (var i=j*20;i<length;i++){//i用来找到整个jsonarray中的第几个。
                    if (size <20){
                        str = "<tr><td>" + jsonArray[i].uid +
                            "</td><td>" + jsonArray[i].uname +
                            "</td><td>" + jsonArray[i].limit +
                            "</td><td>" + jsonArray[i].tips + "</td></tr>";
                        $("#tab").append(str)
                        size++;
                    }else {
                        break;
                    }
                }

                //分页栏的控制,先把div清空。
                //$("#pagesearch").html("");
                //var pagesearch = document.getElementById("pagesearch");
                // if (j=0){
                //     var nextpage = "<button type='button' id='nextpage' >下一页</button>"
                //     pagesearch.innerHTML += nextpage
                // }else if (j=length ){
                //     var lastpage = "<button type='button' id='lastpage' >上一页</button>"
                //     pagesearch.innerHTML += lastpage
                // }else{
                //     var lastpage = "<button type='button' id='lastpage' >上一页</button>"
                //     var nextpage = "<button type='button' id='nextpage' >下一页</button>"
                //     pagesearch.innerHTML += lastpage,nextpage
                // }
            }
        })
    </script>
</head>
<body>
<!--action="/selectUserById"-->
<!--function="post" action="/searchUserByAll"-->
<form class="content" id="cont2">
    <label>查询</label>
    <input type="text" name="search" id="search" value="">
    <button type="button" name="submit" id="submit">搜索</button>
    <button type="button" name="update" id="update" >更新</button>
</form>
<!--<p id="test">程序开始后变换</p>-->
<table id="tab" border="1px" >
    <tr>
        <td width="80px">工号</td>
        <td width="150px">姓名</td>
        <td width="300px">权限</td>
        <td width="300px">备注</td>
    </tr>
</table>
<div align="right" id="pagesearch">
    <button type="button" name="lastpage" id="lastpage">上一页</button>
    <i id="num"></i>
    <button type="button" name="nextpage" id="nextpage">下一页</button>
</div>
</body>
</html>